<template>
  <div id="views" class="rechargePublic">
    <section class="sec1">
      <p class="title overhidden">
        <span>1.请向指定银行账户付款</span>
        <button id="copyAccount" class="copyAccount" :data-clipboard-text="receiveAccount" @click="copy">复制收款账号</button>
      </p>
      <table cellspacing="0" border="1" class="width100">
        <tbody>
        <tr>
          <td>收款方户名</td>
          <td>海南安麦云科技有限公司</td>
        </tr>
        <tr>
          <td>收款方开户行</td>
          <td>中国工商银行股份有限公司海口市澄迈软件园支行</td>
        </tr>
        <tr>
          <td>收款方账号</td>
          <td>{{receiveAccount}}</td>
        </tr>
        <tr>
          <td>转账金额</td>
          <td>{{money}}</td>
        </tr>
        <tr>
          <td>状态</td>
          <td class="r_status" style="color: #b61400;">待确认转账</td>
        </tr>
        </tbody>
      </table>
      <p class="title">2.请用第三方网银或者银行柜台转账。</p>
      <p class="title">3.转账后请填写转账人姓名,提交确认请求</p>
      <p class="title">4.若遇周末充值，则顺延至工作日处理。</p>
      <div class="cardOwner">
        <p class="name">转款卡主姓名</p>
        <p class="inputName">
          <input type="text" placeholder="请输入卡主姓名" v-model="cardName">
        </p>
      </div>
    </section>
    <div class="reminder">
      <p>温馨提示：</p>
      <span>
        如有任何疑问请联系在线客服(请在工作日<span>9:00~21:00</span>之间完成 充值)
      </span>
    </div>
    <button class="yellowbtn" id="submit" @click="submit">立即充值</button>
  </div>
</template>
<script>
  export default {
    name:'recharge_public',
    data(){
      return{
        introduce:'对公转账',
        receiveAccount:'22010805091100242253',//收款方账号，复制用
        money : '',//充值金额
        cardName:'',/*卡主姓名*/
      }
    },
    methods:{
      copy(){
        /*复制收款账号*/
        let copy = require('../../common/js/copy').copy;
        copy({id:'#copyAccount' , toast:'收款账号复制成功'});
      },
      submit(){
        let toast = require('../../common/js/toast').toast;
        if( !this.cardName ){
          toast('请输入转款卡主姓名！');
        }else{
          this.$router.push({path:'/recharge_confirm',query:{money : this.money , cardName : this.cardName }})
        }
      }
    },
    mounted() {
      this.money = this.$route.query.money;
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{
    padding:0.5rem 0.3rem;text-align: left;
  }
  .sec1{
    background: #fff;color: #7F8286;font-size: 0.32rem;padding:0.28rem;
    .copyAccount{
      color: #C99B2D;font-size: 0.24rem;padding:0.12rem 0.2rem;background: #F9F3D6;float: right;
    }
  }
  .title{padding-top: 0.28rem;}
  .title:first-child{padding-top: 0}
  .title>span{line-height: normal}
  table{
    font-size: 0.2rem;border-collapse:collapse;margin-top: 0.25rem;
    td{
      padding:0.2rem 0rem;border: 0.02rem solid #9f9f9f;
    }
    tr>td:first-child{
      color:#707070;text-align: right;padding-right: 0.1rem;
    }
    tr>td:last-child{
      color:#313131;text-align: left;padding-left: 0.1rem;
    }
  }
  .cardOwner{
    >.name{
      font-size: 0.32rem;color: #262626;padding-top: 0.39rem;
    }
    >.inputName{
      border-bottom: 0.02rem solid#e5e5e5;padding-top: 0.1rem;
      >input{width: 100%;height: 0.8rem;}
    }
  }
  .reminder{
    padding-top: 0.4rem;
    >p{color: #595959;font-size: 0.32rem;}
    >span{
      color:#7F8286;font-size: 0.28rem;display: block;padding-top: 0.26rem;line-height: 150%;
      >span{color: #f46868}
    }
  }
  #submit{margin-top: 0.48rem;margin-bottom: 0.48rem;}
</style>
